import { useState } from 'react';

import { AccordionProps } from '@/shared/interfaces';
import { Accordion } from '@/shared/ui/Accordion';
import cn from 'classnames';

import cs from './List.module.scss';

export const AccordionList = ({ list, className }: { list: unknown & AccordionProps[]; className?: string }) => {
  const [current, setCurrent] = useState<AccordionProps['id'] | undefined>(undefined);
  const handleToggle = (id: AccordionProps['id']) => {
    if (id === current) {
      setCurrent(() => undefined);
      return;
    }
    setCurrent(() => id);
  };
  return (
    <div className={cn(cs.list, className)}>
      {list.map((item) => (
        <div className={cs.item} key={item.id}>
          <Accordion
            data-testid={`accordion-list-item-${item.id}`}
            isOpen={current === item.id}
            item={item}
            setIsOpen={() => handleToggle(item.id)}
          />
        </div>
      ))}
    </div>
  );
};
